﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS环形进度条</title>
<script src="../js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas1" width="144" height="72"></canvas>
<canvas id="canvas3" width="72" height="72"></canvas>

<script>
 var bg = document.getElementById('canvas1');
 var ctx = bg.getContext('2d');
 ctx.beginPath();
 ctx.lineWidth = 10;
 ctx.strokeStyle = '#e5e5e5';
 var grd = ctx.createLinearGradient(0, 0, 100, 0); //从左到右
 grd.addColorStop(0, "#e5e5e5"); //起始颜色
 grd.addColorStop(1, "#e5e5e5"); //终点颜色
 ctx.fillStyle = grd;
 ctx.arc(72, 56, 36, 1 * Math.PI, 2 * Math.PI, false);
 ctx.stroke();

 var mmp = 1;
 var end = 1.56
 var move = function() {
     ctx.beginPath();
     ctx.lineWidth = 10;
     ctx.strokeStyle = '#000';
     var grd = ctx.createLinearGradient(0, 0, 100, 0); //从左到右
     grd.addColorStop(0, "#15b5c3"); //起始颜色
     grd.addColorStop(1, "#adc83d"); //终点颜色
     ctx.strokeStyle = grd;
     // ctx.fillRect(0,0,400,400)
     console.log(mmp)
     ctx.arc(72, 56, 36, 1 * Math.PI, mmp * Math.PI, false);
     ctx.stroke();
     if (end != 1.00) {
         mmp += 0.01
         if (mmp < end) {
             setTimeout(move, 10)
         }
     }
 }
 move()


 var bg2 = document.getElementById('canvas3');
 var ctx2 = bg2.getContext('2d');
 ctx2.beginPath();
 ctx2.lineWidth = 10;
 ctx2.strokeStyle = '#e5e5e5';
 var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
 grd2.addColorStop(0, "#e5e5e5"); //起始颜色
 grd2.addColorStop(1, "#e5e5e5"); //终点颜色
 ctx2.fillStyle = grd2;
 ctx2.arc(36, 36, 30, 0 * Math.PI, 2 * Math.PI, false);
 ctx2.stroke();

 ctx2.fillStyle = '#8b4e9e';
 ctx2.font = 'normal 16px 微软雅黑';
 ctx2.textBaseline = "middle"; //竖直对齐
 ctx2.textAlign = "center"; //水平对齐　
 ctx2.fillText("95%", 36, 36, 50); //绘制文字

 var mmp2 = 1;
 var end2 = 2.95
 var move2 = function() {
     ctx2.beginPath();
     ctx2.lineWidth = 10;
     ctx2.strokeStyle = '#000';
     var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
     grd2.addColorStop(0, "#7c71b6"); //起始颜色
     grd2.addColorStop(1, "#8b4e9e"); //终点颜色
     ctx2.strokeStyle = grd2;
     // ctx2.fillRect(0,0,400,400)

     ctx2.arc(36, 36, 30, 1 * Math.PI, mmp2 * Math.PI, false);
     ctx2.stroke();
     if (end2 != 1) {
         mmp2 += 0.01
         if (mmp2 < end2) {
             setTimeout(move2, 10)
         }
     }
 }
 move2()
</script>

</body>
</html>
